<template>

  <a-modal  :maskClosable="false"
    v-if="visible"
    :title="!dataForm.id ? '新增' : '修改'"
    :width="500"
    @ok="!dataForm.id ? createData() : updateData() "
    v-model="visible"
  >
    <a-form>

      <a-form-item
        :labelCol="mdl.labelCol"
        :wrapperCol="mdl.wrapperCol"
        label="角色名"
      >
        <a-input placeholder="" v-model="dataForm.roleName"/>
      </a-form-item>


      <a-form-item
        :labelCol="mdl.labelCol"
        :wrapperCol="mdl.wrapperCol"
        label="描述"
      >
        <a-input placeholder="" v-model="dataForm.description"/>
      </a-form-item>


      <!--<a-form-item-->
      <!--:labelCol="mdl.labelCol"-->
      <!--:wrapperCol="mdl.wrapperCol"-->
      <!--label="授权"-->
      <!--&gt;-->
      <!--<a-tree-->
      <!--checkable-->
      <!--@expand="onExpand"-->
      <!--:expandedKeys="expandedKeys"-->
      <!--:autoExpandParent="autoExpandParent"-->
      <!--v-model="checkedKeys"-->
      <!--@select="onSelect"-->
      <!--:selectedKeys="selectedKeys"-->
      <!--:treeData="treeData"-->
      <!--/>-->
      <!--</a-form-item>-->

    </a-form>
  </a-modal>


</template>

<script>
  import { treeDataTranslate } from '@/utils/util'



  export default {
    inject: ['upShow'],
    data() {
      return {
        visible: false,
        dataForm: {
          id: null,
          roleName: '',
          description: ''
        },

        /*   -------弹窗--------*/
        mdl: {
          labelCol: {
            xs: { span: 24 },
            sm: { span: 5 }
          },
          wrapperCol: {
            xs: { span: 24 },
            sm: { span: 16 }
          }
        },

        expandedKeys: ['0-0-0', '0-0-1'],
        autoExpandParent: true,
        checkedKeys: ['0-0-0'],
        selectedKeys: [],
        treeData:[]
      }
    },
    methods: {
      init(id , row) {
        if(id || id === 0){
          this.dataForm.roleName = row.roleName
          this.dataForm.description = row.description
          this.dataForm.id = id || null
        }else {
          this.dataForm = {
              id: null,
              roleName: '',
              description: ''
          }
        }
        this.dataForm.id = id || null
        this.visible = true

      },

      createData() {
        //新增数据
        const  params = {...this.dataForm}
        this.$axios
          .post(this.$URLMAP.url.role.add, params)
          .then((response) => {
            if (response.code === 200) {
              this.upShow(1, '角色新增成功')
              this.visible = false
              this.$emit('refreshDataList' )
            } else {
              this.upShow(2, res.msg || '角色新增失败')
            }

          }).catch(err => {
          this.upShow(2, '添加角色接口调用失败')
        })
      },

      updateData() {
        //修改数据
        //新增数据
        const  params = {...this.dataForm}
        this.$axios
          .put(this.$URLMAP.url.role.update,params)
          .then((response) => {
            if (response.code === 200) {
              this.upShow(1, '角色修改成功')
              this.visible = false
              this.$emit('refreshDataList' )
            } else {
              this.upShow(2, res.msg || '角色修改失败')
            }
          }).catch(err => {
          this.upShow(2, '添加修改接口调用失败')
        })
      },

      onExpand(expandedKeys) {
        console.log('onExpand', expandedKeys)
        // if not set autoExpandParent to false, if children expanded, parent can not collapse.
        // or, you can remove all expanded children keys.
        this.expandedKeys = expandedKeys
        this.autoExpandParent = false
      },
      onCheck(checkedKeys) {
        console.log('onCheck', checkedKeys)
        this.checkedKeys = checkedKeys
      },
      onSelect(selectedKeys, info) {
        console.log('onSelect', info)
        this.selectedKeys = selectedKeys
      }
    },
    watch: {
      checkedKeys(val) {
        console.log('onCheck', val)
      }
    }
  }
</script>
